<template>
  <div class="tingdan">
    <Navi title="听单" />

    <div class="totle">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.title"
          v-for="(item, index) in fl"
          :key="index"
          @click="getGe(item.name)"
        />
      </van-sidebar>

      <div class="list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="(item1, index) in list1" :key="index">
              <div class="product" @click="viewAudio(list3[index].id)">
                <div class="img-box">
                  <img
                    class="auto-img"
                    :src="
                      'https://imagev2.xmcdn.com/' +
                          cover[index]
                    "
                    alt=""
                  />
                </div>
                <div class="textbox">
                  <div class="product-name one-text">
                    {{ t[index]}}
                  </div>
                  <div class="product-enname one-text">
                    {{ ent[index] === '' ? '中国文学史上第一部章回小说，是历史演义小说的开山之作' : ent[index] }}
                  </div>
                </div>
              </div>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import Navi from "../components/Navi.vue";
export default {
  name: "Tingdan",
  components: {
    Navi,
  },
  data() {
    return {
      fl: [],
      list: [],
      list1: [],
      list3:[],
      cover:[],
      t:[],
      ent:[],
      activeKey: 2,
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  created() {
    this.getFl();
    this.getGe("xiangsheng");
  },
  methods: {
    getFl() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/ximalaya/ting/categories",
      })
        .then((result) => {
          this.$toast("加载完成");
          this.fl = result.data.data.categories;
          this.fl.splice(2, 1);
        })
        .catch((err) => {
          
        });
    },
    getGe(name) {
      this.axios({
        method: "get",
        url:
          "https://apis.netstart.cn/ximalaya/rank/queryRank?clusterCode=hotplay&categoryCode=" +
          name,
      })
        .then((result) => {
          this.$toast("加载完成");
          this.list = result.data.data.rankModuleInfoList;
          this.list.shift();
          this.list3 = [];
          this.t = [];
          this.ent = [];
          this.cover = [];
          this.list.forEach(v=>{
            this.list3.push(v.albumInfo)
            this.list3.forEach(i=>{
              this.t.push(i.title)
              this.ent.push(i.customTitle)
            })
            this.cover.push(v.albumInfo.cover)
          })
        })
        .catch((err) => {
          
        });
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list1 = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 20; i++) {
          this.list1.push(this.list1.length + 1);
        }
       
        this.loading = false;

        if (this.list1.length > 79) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    viewAudio(trackid) {
      this.$router.push({ name: "Audio", params: { trackid } });
    },
  },
};
</script>

<style lang="less" scoped>
.totle {
  display: flex;
}
.list {
  width: 75%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  flex-wrap: wrap;
  margin-left: 5px;
  .van-cell{
    padding: 5px;
    
  }
  .product {
    width: 280px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-between;
    .img-box {
      width: 90px;
      height: 90px;
    }
    .textbox{
      width: 185px;
      height: 100%;
      padding: 0 8px;
      box-sizing: border-box;
      .product-name{
        width: 100%;
        color: #333;
        font-size: 16px;
        font-weight: bold;
        margin-top: 10px;
      }
      .product-enname{
        width: 100%;
        font-size: 14px;
        color: #333;
        margin-top: 10px;
      }
    }

  }
}
</style>